<template>
  <div id="detail-params">
    <div class="detail-params-info detail-params-rule">
      <table>
        <tr v-for="(item, index) in detailParams.sizeInfo" :key="index">
          <td v-for="(itemInfo, index) in item" :key="index">{{itemInfo}}</td>
        </tr>
      </table>
    </div>
    <div class="detail-params-info detail-params-shopper">
      <table>
        <tr v-for="(item, index) in detailParams.productInfo" :key="index">
          <td>{{item.key}}</td>
          <td>{{item.value}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailParams",
  props: {
    detailParams: {
      type: Object,
      default() {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="less">
  .detail-params-info {
    background-color: #fff;
    table {
      border-spacing: 0;
      border-collapse: collapse;
      border: 1px solid #eeeeee;
      tr {
        border: 1px solid #eeeeee;
      }
      td {
        padding: 10px;
      }
    }
  }
  .detail-params-shopper {
    table {
      width: 100%;
      td:first-child {
        width: 25%;
      }
      td:last-child {
        color: var(--color-high-text);
        width: 75%;
      }
    }
  }
  .detail-params-rule {
    margin: 10px 0;
    table {
      width: 100%;
      td {
        width: 25%;
      }
    }
  }
</style>